<template>
	<view class="pCenters">
		<u-toast ref="uToast" />
		<view class="" >
			<u-dropdown>
				<u-dropdown-item v-model="value1" :title="rosterTitle" :options="roster" @change="rosterChange"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="empty" v-if="appData.length == 0">
			<u-empty text="数据为空" mode="data" icon-size="220" font-size="36"></u-empty>
		</view>
		<view v-else>
			<view style="padding: 0 40rpx;">
				<view class="useApp box box-pack-between" v-for="(item,index) in appData" :key="item.app_id" :class="{'marButton': index === appData.length - 1}"
					@click="gotoDetails(item.app_id)">
					<view class="box box-align-center" style="width: 40%;">
						<view class="app_left box box-align-center">
							<view class="app_img">
								<image :src="item.app_img" mode=""></image>
							</view>
							<view class="img_text">{{item.app_name}}</view>
						</view>
					</view>
					<view class="app_right box box-pack-between box-align-center">
						<view class="app_info box box-pack-center box-wrap">
							<view class="info_text">{{item.is_network ? '联网' : '禁网'}}</view>
							<u-switch v-model="item.is_network" size="30" inactive-color="#e2e2e2" disabled></u-switch>
						</view>
						<view class="app_info box box-pack-center box-wrap">
							<view class="info_text">{{item.is_upgrade ? '更新' : '禁止更新'}}</view>
							<u-switch v-model="item.is_upgrade" size="30" inactive-color="#e2e2e2" disabled></u-switch>
						</view>
						<view class="app_info box box-pack-center box-wrap">
							<view class="info_text">{{item.is_auto ? '允许自启' : '禁止自启'}}</view>
							<u-switch v-model="!item.is_auto" size="30" inactive-color="#e2e2e2" disabled></u-switch>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getAppInstall,
		appUninstall,
		querySysApp
	} from '@/api/userHome.js'
	export default {
		data() {
			return {
				appData: [],
				// roster: [{ label: '白名单应用', value: '白名单应用' },{ label: '系统应用', value: '系统应用' }],
				roster: [{ label: '白名单应用', value: '白名单应用' }],
				rosterTitle: '白名单应用',
				value1: '白名单应用'
			}
		},
		onPageScroll(e) {
			console.log('-------', e.scrollTop)
		},
		created() {
			this.getAppInstall(uni.getStorageSync('snId'))
		},
		methods: {
			rosterChange(val) {
				this.rosterTitle = val
				let type = val == '白名单应用' ? 0 : 1
				this.getAppInstall(uni.getStorageSync('snId'),type)
			},
			// getquerySysApp() {
			// 	querySysApp({startSize:1, pageSize: 1000}).then(res => {
			// 		this.getAppInstall(uni.getStorageSync('snId'),res.data)
			// 	}).catch(err => {})
			// },
			getAppInstall(id,type = 0) {
				getAppInstall({
					id: id,
					type: type
				}).then(res => {
					// let filters = {
					// 	app_name: system.map(item => item.app_name)
					// } //过滤这些
					// let keys = Object.keys(filters)
					// this.appData = res.data.filter(item => keys.every(key => filters[key].indexOf(item[key]) === -1))
					// let keyss = {
					// 	app_name: this.appData.map(item => item.app_name)
					// }
					// let keysss = Object.keys(keyss)
					// this.systemData = res.data.filter(item => keysss.every(key => keyss[key].indexOf(item[key]) === -1))
					this.appData = res.data
					console.log('app应用', this.appData)
				}).catch(err => {
					console.log('我的应用', err)
					this.appData = []
				})
			},
			//跳转管控详情
			gotoDetails(id) {
				console.log('缓存id', uni.getStorageSync('snId'), id)
				console.log('这是appId', id)
				uni.navigateTo({
					url: '/pages/userHome/myApp/appDetails/index?appId=' + id
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.appText {
		background-color: #FFFFFF;
		font-size: 24rpx;
		padding: 0 20rpx 20rpx 20rpx;
		border-radius: 24rpx;
		overflow: hidden;

		.text {
			line-height: 40rpx;
			height: 40rpx;
		}
	}

	.useApp {
		padding: 40rpx 20rpx;
		background-color: #e9e9e9;
		margin-top: 20rpx;
		border-radius: 24rpx;
		overflow: hidden;

		image {
			height: 100%;
			width: 100%;
		}

		.app_left {
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			width: 100%;

			.app_img {
				height: 100rpx;
				width: 100rpx;
				overflow: hidden;
				border-radius: 24rpx;
			}

			.img_text {
				margin-left: 10rpx;
				font-size: 28rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				word-break: break-all;
				width: 55%;
			}

			.app_button {
				background-color: #00b7ee;
				letter-spacing: 2rpx;
				color: #FFFFFF;
				height: 50rpx;
				line-height: 50rpx;
				width: 160rpx;
				font-size: 24rpx;
				border-color: #00b7ee;
				padding: 0 10rpx;
			}
		}

		.app_right {
			width: 60%;
			font-size: 28rpx;

			.app_control {
				border-bottom: 1px solid #d8d8d8;
				padding: 30rpx;
			}

			.app_info {
				width: 30%;

				.info_img {
					height: 60rpx;
					width: 60rpx;
				}

				.info_text {
					margin-bottom: 10rpx;
					width: 100%;
					font-size: 20rpx;
					text-align: center;
				}
			}
			
		}
		
		.app_control:last-child {
			border-bottom: 0;
		}
	}
	.marButton {
		margin-bottom: 20rpx;
	}
</style>
